<html>
    <head>
        <title>Itowns - Compare 3D and 2.5D</title>

        <script type="importmap">
        {
            "imports": {
                "itowns": "../dist/itowns.js",
                "debug": "../dist/debug.js",
                "dat": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js",
                "GuiTools": "./jsm/GUI/GuiTools.js",
                "LoadingScreen": "./jsm/GUI/LoadingScreen.js",
                "itowns_widgets": "../dist/itowns_widgets.js",
                "three": "https://unpkg.com/three@0.170.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.170.0/examples/jsm/"
            }
        }
        </script>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                overflow:hidden;
                height:100%;
            }

            #viewerDiv {
                position: absolute;
                left: 0%;
                width: 50%;
                height: 100%;
            }
            #planarDiv {
                position: absolute;
                left: 50%;
                width: 50%;
                height: 100%;
            }

            #menuDiv {
                position: absolute;
                left: 10px;
                top: 0px;
                z-index: 0;
            }

            #menuDiv, .ac {
                -moz-user-select: none;
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
                z-index: 2 !important; /* TODO Solve this in HTML, Problem from copy from main.css examples THREE */
            }
        </style>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="viewerDiv"></div>
        <div id="planarDiv"></div>
        <script type="module">

            import GuiTools from 'GuiTools';
            import setupLoadingScreen from 'LoadingScreen';
            import * as THREE from 'three';
            import * as itowns from 'itowns';
            import * as debug from 'debug';
            import * as itowns_widgets from 'itowns_widgets';
            // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
            itowns.CRS.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
            /* global itowns, document, GuiTools, Promise */
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 4.838, 45.756),
                range: 1000,
            }
            var extent = new itowns.Extent(
                'EPSG:3946',
                1837816.94334, 1847692.32501,
                5170036.4587, 5178412.82698);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');
            var planarDiv = document.getElementById('planarDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, placement);
            var planarView = new itowns.PlanarView(planarDiv, extent, { placement });

            var promises = [];
            var menuGlobe = new GuiTools('menuDiv', view);
            var overGlobe = true;

            viewerDiv.addEventListener('mousemove', function _() {
                overGlobe = true;
            }, false);

            planarDiv.addEventListener('mousemove', function _() {
                overGlobe = false;
            }, false);

            promises.push(itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer(config.id, config);
                view.addLayer(layer);
            }));

            // Listen for globe full initialisation event
            view
                .addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED,
                    function globeInitialized() {
                        // eslint-disable-next-line no-console
                        console.info('Globe initialized');
                        Promise.all(promises).then(function init() {
                            var planarCamera = planarView.camera3D;
                            var globeCamera = view.camera3D;
                            var params;
                            menuGlobe.addImageryLayersGUI(view.getLayers(function filterColor(l) { return l.isColorLayer; }));
                            menuGlobe.addElevationLayersGUI(view.getLayers(function filterElevation(l) { return l.isElevationLayer; }));

                            function sync() {
                                if (overGlobe) {
                                    params = itowns.CameraUtils
                                        .getTransformCameraLookingAtTarget(
                                            view, globeCamera);
                                    itowns.CameraUtils
                                    .transformCameraToLookAtTarget(
                                            planarView, planarCamera, params);
                                } else {
                                    params = itowns.CameraUtils
                                        .getTransformCameraLookingAtTarget(
                                            planarView, planarCamera);
                                    itowns.CameraUtils
                                        .transformCameraToLookAtTarget(
                                                view, globeCamera, params);
                                }
                            }
                            sync();
                            view
                                .addFrameRequester(itowns
                                    .MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE, sync);
                            planarView
                                .addFrameRequester(itowns
                                    .MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE, sync);
                        }).catch(console.error);
                    });

            var wmsImagerySource = new itowns.WMSSource({
                extent: extent,
                name: 'ortho_latest',
                url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
                version: '1.3.0',
                crs: 'EPSG:3946',
                format: 'image/jpeg',
            });

            var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
                updateStrategy: {
                    type: itowns.STRATEGY_DICHOTOMY,
                    options: {},
                },
                source: wmsImagerySource,
            });
            planarView.addLayer(wmsImageryLayer);
            var d = new debug.Debug(view, menuGlobe.gui);
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
            window.view = view;
            window.itowns = itowns;
            window.THREE = THREE;

        </script>
    </body>
</html>
